<template>
  <div class="love-integral">
    <c-title :text="setHeadTitle()"></c-title>

    <!-- <div>可转换：{{ this.$route.name == "consumption_dividend_toPoint" ? loveData.amount : loveData.love }}</div> -->
    <div>可转换：{{ computAmount }}</div>
    <div class="content">
      <div v-if="this.$route.name == 'consumption_dividend_toPoint'">请输入要转化的消费分红额度</div>
      <div v-else>请输入要转化的{{ computLoveName }}</div>
      <div class="exchange">
        <i class="iconfont icon-fontclass-jifen"></i>
        <input type="number" class="input" v-model="love_nums" />
        <div class="all" @click="allLove">全部兑换</div>
      </div>
      <div class="tips">
        <template v-if="this.$route.name == 'consumption_dividend_toPoint'">
          <span>注：转化比例{{ loveData.exchange_amount_count }}:{{ loveData.exchange_point_count }},</span>
          <span>可转化{{ loveData.exchange_point_count * Number(love_nums ? love_nums : 0).toFixed(2) }}{{ point }}</span>
        </template>
        <template v-else-if="this.$route.name == 'to-freeze'">
          <span>例如：1个{{ loveData.usable_title }}可以转化{{ loveData.usable_to_freeze_ratio }}{{ loveData.freeze_title }}</span>
        </template>
        <template v-else>
          <span v-if="this.$route.name == 'love-point'">注：转化比例1：{{ loveData.ratio }},</span>
          <span>可转化{{ (loveData.ratio * love_nums || 0).toFixed(2) }}{{ this.$route.name == "love-point" ? point : integral }}</span>
          <span v-if="loveData.least > 0 && this.$route.name != 'love-point'">,最低保留{{ loveData.least }}{{ loveName }}</span>
          <span v-if="loveData.value > 0 && this.$route.name != 'love-point'">,1{{ loveName }}={{ loveData.value }}元</span>
        </template>
      </div>
      <div class="confirm" @click="setdata">确认转化</div>
      <div class="tips" v-if="this.$route.name == 'to-freeze'">
        <div>注：转化比例为{{loveData.usable_to_freeze_ratio_symbol}}%</div>
        <div v-if="love_nums">您实际转账到账数为：{{love_nums*(loveData.usable_to_freeze_ratio_symbol/100)}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loveData: {
        love: 0,
        ratio: 0,
        least: 0,
        value: 0
      },
      love_nums: "",
      integral: "消费积分",
      loveName: "爱心值",
      point: "积分"
    };
  },
  computed: {
    computAmount() {
      if (this.$route.name == "consumption_dividend_toPoint") {
        return this.loveData.amount;
      } else if (this.$route.name == "to-freeze") {
        return this.loveData.usable_love;
      } else {
        return this.loveData.love;
      }
    },
    computLoveName() {
      if (this.$route.name == "to-freeze") {
        return this.loveData.usable_title;
      } else {
        return this.loveName;
      }
    }
  },
  activated() {
    this.getdata();
    this.getyz_basic_info();
  },
  methods: {
    setHeadTitle() {
      let str = "转换" + this.integral;
      if (this.$route.name == "love-point" || this.$route.name == "consumption_dividend_toPoint") {
        str = "转换" + this.point;
      }
      if(this.$route.name == 'to-freeze'){
        str= `转换${this.loveData.freeze_title}`
      }
      return str;
    },
    getyz_basic_info() {
      let yz_basic_info = localStorage.getItem("yz_basic_info");
      if (yz_basic_info) {
        yz_basic_info = JSON.parse(yz_basic_info);
        this.integral = yz_basic_info.integral;
        this.loveName = yz_basic_info.love;
        if (this.$route.name == "love-point") {
          this.point = this.fun.getCustomTextLang("member_center.credit1", "积分");
          this.fun.setWXTitle("转换" + this.point);
        } else if (this.$route.name == "consumption_dividend_toPoint") {
          this.point = this.fun.getCustomTextLang("member_center.credit1", "积分");
          this.fun.setWXTitle("转换" + this.point);
        } else if (this.$route.name == 'to-freeze'){
          this.fun.setWXTitle("转换冻结爱心值");
        } else {
          this.fun.setWXTitle("转换" + yz_basic_info.integral);
        }
      }
    },
    loading(message) {
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        message,
        forbidClick: true
      });
    },
    getdata() {
      this.loading("获取数据中...");
      console.log(this.$route.name);
      let url = "plugin.love.Frontend.Modules.Love.Controllers.change-integral.index";
      let json = {};
      if (this.$route.name == "love-point") {
        url = "plugin.love.Frontend.Modules.Love.Controllers.transformation-point.index";
      } else if (this.$route.name == "consumption_dividend_toPoint") {
        url = "plugin.consume-commission.frontend.exchange.index";
        json.pool_id = this.$route.params.pool_id;
      } else if (this.$route.name == "to-freeze") {
        url = "plugin.love.Frontend.Modules.Love.Controllers.usable-love.transform-freeze";
      }
      $http.post(url, json, "加载中").then(({ result, msg, data }) => {
        this.$toast.clear();
        if (result == 1) this.loveData = data;
        else this.$toast(msg);
        if(this.$route.name =='to-freeze'){
          this.fun.setWXTitle("转换" + this.loveData.freeze_title);
        }
      });
    },
    setdata() {
      if (this.love_nums <= 0 || this.love_nums === "") {
        this.$toast("转化的数量不能为0，也不能为空");
        return false;
      } else if (this.love_nums * 1 > this.loveData.love * 1) {
        this.$toast("转化的数量不能大于总数量");
        return false;
      } else if (this.love_nums * 1 > (this.loveData.love - this.loveData.least) * 1) {
        this.$toast("最低保留" + this.loveData.least + "爱心值");
        return false;
      }
      let json = { love_nums: this.love_nums };
      this.loading("正在转化中...");
      let url = "plugin.love.Frontend.Modules.Love.Controllers.change-integral.change";
      if (this.$route.name == "love-point") {
        url = "plugin.love.Frontend.Modules.Love.Controllers.transformation-point.change";
      } else if (this.$route.name == "consumption_dividend_toPoint") {
        url = "plugin.consume-commission.frontend.exchange.exchange";
        json = {};
        json.pool_id = this.$route.params.pool_id;
        json.exchange_amount = this.love_nums;
      }
      $http.post(url, json, "加载中").then(({ result, msg, data }) => {
        if (result == 1) {
          this.$toast({
            type: "success",
            message: data
          });
          this.love_nums = "";
          setTimeout(() => {
            this.getdata();
          }, 1000);
        } else this.$toast(msg);
      });
    },
    allLove() {
      if (this.$route.name == "love-point") {
        this.love_nums = Number(this.loveData.love).toFixed(2);
        return;
      }
      if (this.$route.name == "consumption_dividend_toPoint") {
        this.love_nums = Number(this.loveData.amount).toFixed(2);
        return;
      }
      this.love_nums = (this.loveData.love - this.loveData.least).toFixed(2);
    }
  }
};
</script>

<style scoped lang="scss">
$mt: 0.8rem;
$color: #f15353;

.love-integral {
  text-align: left;
  padding: $mt;

  .content {
    margin-top: $mt;
    background-color: #fff;
    box-shadow: 0 1px 4px 0 rgba(7, 11, 33, 0.11);
    border-radius: 0.2rem;
    padding: $mt 1rem;

    .exchange {
      display: flex;
      align-items: center;
      border-bottom: 1px solid rgba(84, 152, 252, 0.2);
      font-size: 0.75rem;
      padding: $mt 0;
      .input {
        border: none;
        flex: 1;
        padding: 0 1rem;
        color: #333;
        font-size: 1.3rem;
        overflow: auto;
      }
      .icon-fontclass-jifen {
        color: $color;
        font-size: 1.3125rem;
      }
      .all {
        color: $color;
      }
    }
    .tips {
      color: #888;
      margin: $mt 0;
    }

    .confirm {
      height: 2.5rem;
      line-height: 2.5rem;
      text-align: center;
      font-size: 0.875rem;
      color: #fff;
      background-color: $color;
      border-radius: 0.375rem;
      margin: 0 auto;
    }
  }
}
</style>
